<template>
  <a-cascader
    :showSearch="{ filter }"
    :options="options"
    placeholder="省份/城市/地区"
    @change="onchangeArea"
    v-model="cValue"
    change-on-select
    autocomplete="off"
  />
</template>
<script>
import { getCity } from '@/api/api'
export default {
  name: 'SelectCity',
  props: {
    cityCode: String,
    value: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      options: [],
      cValue: []
    }
  },
  created() {
    getCity().then(res => {
      this.options = res
    })
  },
  methods: {
    onchangeArea: function(value, selectedOptions) {
      if (!selectedOptions) {
        this.cValue = []
        this.$emit('change', '', '')
        return
      }
      let selectedCityIdList = selectedOptions
      let selectedCityId = selectedCityIdList.map(list => list.id)
      this.cValue = value
      this.$emit('change', value.join(','), selectedCityId.join(','))
    },
    filter(inputValue, path) {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    }
  },
  watch: {
    cityCode: function() {
      // console.log(this.cityCode)
      if (this.cityCode) {
        this.cValue = this.cityCode.split(',')
      } else {
        this.cValue = []
      }
    },
    value(val) {
      if (!val) {
        this.cValue = []
      } else {
        this.cValue = this.value.split(',')
      }
    }
  }
}
</script>

<style></style>
